<template>
  <div>
    <div>几何体顶点位置数据和点模型</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px">1212</div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    console.log(' webgl.value', webgl.value);

    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    //创建一个空的几何体对象
    const geometry = new THREE.BufferGeometry();
    const geometrytwo = new THREE.BufferGeometry();

    const boxGeometry = new THREE.BoxGeometry(50, 50, 50);
    //类型化数组创建顶点数据
    const vertices = new Float32Array([
      0,
      0,
      0, //顶点1坐标
      80,
      0,
      0, //顶点2坐标
      80,
      80,
      0, //顶点3坐标

      0,
      0,
      0, //顶点4坐标   和顶点1位置相同
      80,
      80,
      0, //顶点5坐标  和顶点3位置相同
      0,
      80,
      0, //顶点6坐标
    ]);

    // 创建属性缓冲区对象
    //3个为一组，表示一个顶点的xyz坐标
    const attribue = new THREE.BufferAttribute(vertices, 3);

    // 设置几何体attributes属性的位置属性
    geometry.attributes.position = attribue;

    const material = new THREE.MeshBasicMaterial({
      color: 0xffff23,
      transparent: true,
      opacity: 0.6,
      // size: 5.0, //点对象萦尺
      // side: THREE.DoubleSide, // 两面可见,
    });
    const verticestwo = new Float32Array([
      0,
      0,
      0, //顶点1坐标
      0,
      0,
      80, //顶点2坐标
      0,
      80,
      80, //顶点3坐标
      0,
      80,
      0, //顶点4坐标
    ]);
    const indexs = new Uint16Array([0, 1, 2, 0, 2, 3]);
    const attribuetwo = new THREE.BufferAttribute(verticestwo, 3);
    geometrytwo.attributes.position = attribuetwo;
    geometrytwo.index = new THREE.BufferAttribute(indexs, 1);
    const boxMeshtwo = new THREE.LineLoop(geometrytwo, material);
    scene.add(boxMeshtwo);

    const boxMesh = new THREE.Mesh(boxGeometry, material);
    scene.add(boxMesh);

    var materialpoin = new THREE.LineBasicMaterial({
      //使用顶点颜色城据渲染模型，不需要再定义coLor属性
      color: 0xff0000,
      // vertexColors: THREE.VertexColors, //以顶点领色为准
      // size: 10.0, //点对象像素尺
      // side: THREE.DoubleSide, // 两面可见,
    });
    var line = new THREE.LineLoop(geometry, materialpoin); //线摸型对象
    scene.add(line); //点对象添加到场景中

    const light = new THREE.AmbientLight(0xffffffff, 0.7);
    scene.add(light);

    const poinLight = new THREE.PointLight();
    poinLight.position.set(100, 200, 200);
    scene.add(poinLight);

    const pointLightHelper = new THREE.PointLightHelper(poinLight);
    scene.add(pointLightHelper);

    const helpers = new THREE.AxesHelper(200);
    scene.add(helpers);

    function renderFun() {
      // console.log('asdfasdf');
      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
